<template>
  <div style="padding: 10px">
    <div class="app-container">
      <div class="filter-container" style="display:flex;justify-content:space-between;align-items:center">
        <div>
          <span>部门:</span>
          <el-select v-model="search.bumen" placeholder="请选择" >
            <el-option
              v-for="(item,index) in groupname"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
          <span>类型：</span>
          <el-select v-model="search.leixin"  placeholder="请选择">
            <el-option
              v-for="item in typeSearchOption"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
          <span>时间：</span>
          <el-date-picker
            v-model="search.time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="dateChange"
          />
          <el-button @click="searchData">搜索</el-button>
        </div>
        <!-- 全局搜索 -->
        <el-input
          v-model="search.value"
          placeholder="全局搜索"
          style="width:300px;margin-left:18px;margin-top:7px"
          class="filter-item"
          @keyup.native="searchData"
        />
      </div>
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        :style="{height:height}"
        :max-height="height-220"
        style="width: 100%;"
      >
        <el-table-column
          label="序号"
          prop="id"
          align="center"
          width="50"
        >
          <template slot-scope="scope">
            {{ scope.$index+1 + (listQuery._page-1)*listQuery._page_size }}
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in tableHeader"
          :key="item.key"
          :label="item.label"
          :min-width="item.width"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.ts">{{ scope.row.ts | parseTime }}</span>  <!-- 时间格式化 -->
            <span v-else>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="详情"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.data.detail }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <div class="pagination-container">
        <el-pagination
          background
          :current-page="listQuery._page"
          :page-sizes="[15,30,50]"
          :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    </div>


</template>

<script>
import request from '../utils/request'
export default {
  name: 'LimitClass1'
}

</script>

<style scoped>

</style>
